<template>
  <div class="wallpaper">
    <div style="font-size:18px;"><a-icon type="picture" style="margin-right:8px;margin-bottom:24px;" />{{$t('wallpaper')}}</div>
    <a-space direction="vertical" size="large" style="width:100%;">
      <div>
        <div class="wallpaper-item" v-for="(item,index) in wallpaperLists.wallpaperList" :key="index" style="margin-top:20px;box-sizing:border-box;display:inline-block;" :class="{select:index===wallpaperLists.id}" @click="btnClick('setWallpaper',item)">
          <div style="padding:10px;"><img :src="require('@/assets/img/'+item)" alt=""></div>
          <div class="title">{{index}}</div>
        </div>
      </div>
    </a-space>
    <a-card class="card">
      <a-row>
        <a-col class="label" :span="5">{{$t('customize')}}</a-col>
        <a-col :span="15"><a-input v-model="value" allowClear :placeholder="$t('srcPlaceholder')"></a-input></a-col>
        <a-col class="button" :span="4"><a-button @click="btnClick('setWallpaper',value)">{{$t('save')}}</a-button></a-col>
      </a-row>   
    </a-card>
    
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations} from 'vuex';
import { windowMsgPost } from '@/utils/util';
import {  saveSetting } from './setting';
export default {
  name: 'Wallpaper',
  i18n: require('./i18n'),
  data () {
    return {
      value: '',
    }
  },
  computed: {
    ...mapState('setting',['wallpaper']),
    ...mapGetters('setting', ['wallpaperLists'])
  },
  mounted () {
    if(/http/.test(this.wallpaper)){
      this.value = this.wallpaper;
    }
  },
  methods: {
    ...mapMutations('setting', ['setWallpaper']),
    btnClick(mutation,value){
      windowMsgPost({mutation,value})
      this[mutation](value)
      saveSetting()
    }
  }
}
</script>
<style lang="less" scoped>
  .wallpaper{
    padding: 12px;
    padding-bottom: 30px;
    background-color: @base-bg-color;
    height: auto;
    .wallpaper-item{
      width: 100px;
      margin-right: 20px;
      height: auto;
      border-radius: 4px;
      border: 1px solid #eee;
      cursor: pointer;
      img{
        width: 100%;
        height: 100%;
      }
      .title{
        padding: 2px;
        width: 100%;
        text-align: center;
        border-top: 1px solid @border-color;
        background: rgba(0,0,0,0.05);
        border-radius: 0 0 4px 4px;
      }
    }
    .wallpaper-item:hover{
      border-color: @primary-color
    }
    .select{
      background-color: fade(@primary-color,15%);
      border-color: @primary-color;
      .title{
        border-top-color: fade(@primary-color,15%);
      }
    }
    .card{
      margin-top: 20px;
      .label{
        height: 32px;
        line-height: 32px;
      }
      .button{
        text-align: end;
      }
    }
  }
</style>